<template>
  <div>
    <div class="main_item" v-if="result.wayDetailInfoVo != undefined">
      <titleVue :title="'运单信息'"></titleVue>
      <el-descriptions
        class="descriptionsInfo"
        :column="3"
        :labelStyle="{
          color: '#939393',
          fontSize: '12px',
          fontWeight: 'bold',
          marginRight: '20px',
        }"
        :contentStyle="{
          color: '#262626',
          fontSize: '12px',
        }"
      >
        <el-descriptions-item label="订单编号">{{
          result.wayDetailInfoVo.orderNo
        }}</el-descriptions-item>
        <el-descriptions-item label="项目名称">{{
          result.wayDetailInfoVo.projectName
        }}</el-descriptions-item>
        <el-descriptions-item label="计价方式">
          {{ result.wayDetailInfoVo.pricingMethodStr }}
        </el-descriptions-item>
        <el-descriptions-item label="计量单位">{{
          result.wayDetailInfoVo.measureUnitStr
        }}</el-descriptions-item>
        <el-descriptions-item label="运量">{{
          result.wayDetailInfoVo.cargoWeight
        }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{
          result.wayDetailInfoVo.contact
        }}</el-descriptions-item>
        <el-descriptions-item label="车牌号">{{
          result.wayDetailInfoVo.numberplate
        }}</el-descriptions-item>
        <el-descriptions-item label="车辆类型" :span="2">{{
          result.wayDetailInfoVo.vehicleType
        }}</el-descriptions-item>
        <el-descriptions-item label="参数">
          <div>
            载重{{ result.wayDetailInfoVo.loadCapacity }}吨, 车厢长{{
              result.wayDetailInfoVo.carriageLength / 10
            }}米, 车高{{ result.wayDetailInfoVo.vehicleHeight }}米, 载方{{
              result.wayDetailInfoVo.loadSide
            }}方
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="品牌型号">{{
          result.wayDetailInfoVo.brandModel
        }}</el-descriptions-item>
        <el-descriptions-item label="规格">{{
          result.wayDetailInfoVo.specification
        }}</el-descriptions-item>
        <el-descriptions-item label="车辆照片">
          <div class="picBox">
            <el-image
              class="pic"
              :src="result.wayDetailInfoVo.carFortyFive"
              :preview-src-list="[result.wayDetailInfoVo.carFortyFive]"
            >
            </el-image>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="司机照片">
          <div class="picBox">
            <el-image
              class="pic"
              :src="result.wayDetailInfoVo.driverPhoto"
              :preview-src-list="[result.wayDetailInfoVo.driverPhoto]"
            >
            </el-image>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
import titleVue from "@/components/titleVue.vue";
import httpApi from "@/http";
export default {
  props: {
    // 标题
    waybillId: {
      typeof: String,
      default: "",
    },
  },
  data() {
    return {
      result: {},
    };
  },
  methods: {
    getListOrder() {
      let params = {
        waybillId: this.$props.waybillId,
      };
      // console.log(params);
      httpApi.WaybillManagementApi.getWaybillDetail(params).then((res) => {
        if (res.data.code == 200) {
          this.result = res.data.data;
        }
      });
    },
  },
  mounted() {
    //this.getListOrder()
  },
  components: {
    titleVue,
  },
  watch: {
    waybillId(e) {
      this.getListOrder();
    },
  },
};
</script>

<style lang="scss" scoped>
.main_item {
  .descriptionsInfo {
    .picBox {
      width: 80px;
      height: 60px;
      border-radius: 6px;

      .pic {
        width: 80px;
        height: 60px;
      }
    }
  }

  .ShippingReceiving_head {
    width: 100%;
    display: flex;
    font-size: 12px;
    margin-bottom: 16px;

    .info_item {
      display: flex;

      .label {
        margin-right: 22px;
        color: #939393;
        height: 16px;
      }

      .value {
        display: flex;
        align-items: center;

        .text {
          color: #262626;
          height: 16px;
        }
      }
    }
  }
}
</style>
